<template>
  <div class="maincontent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="图件审查" name="first">
        <div class="tdMap-box">
          <threeMap @throwPickObj="getPickObj" class="three-map" ref="threeMap">
            <template slot="buttonGroup">
              <el-dropdown class="tjsc-dropdown" @command="handleDropDownView">
                <el-button class="line" size="medium">
                  图件审查
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in drawingList"
                    :key="index"
                    :command="index"
                  >{{ item.fileName }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot="projectDialog">
              <mapView ref="mapView" :projectId="projectId" :fileSelectionList="drawingList" :linkName="linkName"></mapView>
            </template>
          </threeMap>
        </div>
      </el-tab-pane>
      <el-tab-pane label="附件审查" name="second">
        <annexReview
          ref="annexReview"
          :projectId="projectId"
          :attachmentsList="attachmentsList"
          :linkName="linkName"
        ></annexReview>
      </el-tab-pane>
    </el-tabs>
    <div class="exportAdvice" @click="handleCheckReviewOpinion" v-if="!isCurrentProcess">
      <i class="el-icon-document-checked"></i>校验审查意见
    </div>
    <div class="exportAdvice1" @click="exportDrawingOpinion">
      <i class="el-icon-upload2"></i>导出审查意见
    </div>
    <!-- <el-dialog
      :close-on-click-modal="false"
      title="选择导出意见类型"
      :visible.sync="showExport"
      width="18%">
      <div>
        <el-radio-group v-model="exportFlag" class="raGroup">
          <el-radio :label="1">内业复审意见</el-radio>
          <el-radio :label="2">外业复审意见</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showExport = false">取 消</el-button>
        <el-button type="primary" @click="exportDrawingOpinion">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- <div class="chooseExport" v-if="showExport">
      <div class="centerBox">
        <el-radio-group v-model="exportFlag" class="raGroup">
          <el-radio :label="1">内业复审意见</el-radio>
          <el-radio :label="2">外业复审意见</el-radio>
        </el-radio-group>
        <div class="btn">
          <el-button @click="exportDrawingOpinion" type="primary">确定</el-button>
          <el-button @click="exportDrawingOpinion(0)">取消</el-button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import threeMap from '@/components/threeMap'
import mapView from './checks/mapView'
import annexReview from './checks/annexReview'
import {
  getResultDetail,
  checkReviewOpinion
} from '@/api/project1/completedMapping/countyCheck'
import {
  getFileDetail,
  exportDrawingOpinions,
  exportAnnexOpinions
} from '@/api/earlyMapping/countryAuditAdvice'

export default {
  components: {
    mapView,
    annexReview,
    threeMap
  },
  data() {
    return {
      projectId: Number(localStorage.getItem('projectId')),
      linkName: 'COMPLETION_MAPPING_DIST_FIRST_TRIAL', // 环节名称
      activeName: 'first',
      drawingList: [], // 图件列表
      attachmentsList: [], // 附件列表
      showExport: false,
      exportFlag: 1
    }
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem('key') == 'COMPLETION_MAPPING_DIST_FIRST_TRIAL'
      return !isTrue
    }
  },
  created() {
    this._initData()
  },
  methods: {
    //校验审查意见
    handleCheckReviewOpinion: function() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      checkReviewOpinion({ projectId: this.projectId }).then(res => {
        loading.close()
        if (res.data && res.data.resultList) {
          let num = res.data.resultList.length
          this.$message.error(`存在${num}条意见未处理,请处理后提交`)
        } else {
          this.$message.success('操作成功！')
          this.$router.push('/projectManagement/projectImplementation/dealwith')
        }
      })
    },
    exportReviewOpinions() {
      switch (this.activeName) {
        case 'first':
          this.showExport = true
          break
        case 'second':
          exportAnnexOpinions({
            linkId: this.linkName,
            projectId: this.projectId
          }).then(res => {
            // this.fileDownload(res, "附件审查意见.xlsx");
            let contentType = localStorage.getItem('contentType')
            if (contentType == 'application/octet-stream;charset=UTF-8') {
              this.fileDownload(res, '审查意见.xlsx')
            } else {
              this.$message.warning('暂无数据可导出!!!')
            }
          })
          break
        default:
      }
    },
    exportDrawingOpinion() {
      exportDrawingOpinions({
        linkName: this.linkName,
        projectId: this.projectId,
        // auditType: 2
      }).then(res => {
        this.fileDownload(res, '图件审查意见(初审).zip')
      })
      // if (flag !== 0) {
      //   if (this.exportFlag === 1) {
      //     exportDrawingOpinions({
      //       linkName: this.linkName,
      //       projectId: this.projectId,
      //       auditType: 1
      //     }).then(res => {
      //       this.fileDownload(res, '图件内业审查意见(初审).zip')
      //     })
      //   } else if (this.exportFlag === 2) {
          
      //   }
      // }
      // this.showExport = false
    },
    fileDownload(data, fileName) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a')
      eleLink.download = fileName // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = 'none'
      // 字符内容转变成blob地址
      var blob = new Blob([data])
      eleLink.href = URL.createObjectURL(blob)
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      loading.close()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    // 获取文件详情数据
    _getResultDetail() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      getResultDetail({ projectId: this.projectId })
        .then(res => {
          
          if (res.data.drawings) {
            this.drawingList = res.data.drawings // 图层文件列表
            console.log(this.drawingList,"突出文件列表")
          }
          if (res.data.attachments) {
            this.attachmentsList = res.data.attachments // 图层文件列表
          }
          loading.close()
        })
        .catch(err => {
          loading.close()
        })
    },
    // 初始化数据
    _initData() {
      this._getResultDetail()
    },
    handleDropDownView(index) {
      let item = this.drawingList[index]
      if (!item.fileId) {
        // 查看红线
        this.$refs.threeMap.getHxData(item)
      } else {
        // 查看现状图
        this.$refs.threeMap.handleXzView(item)
      }
    },
    getPickObj(e) {
      this.$refs.mapView.getPickObj(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.maincontent {
  box-sizing: border-box;
  background: #ffffff;
  height: calc(100vh - 114px);
  padding: 24px;
  position: relative;
  .exportAdvice {
    position: absolute;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #737373;
    // width: 138px;
    height: 36px;
    right: 170px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .exportAdvice1 {
    position: absolute;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #737373;
    // width: 138px;
    height: 36px;
    right: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .chooseExport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    .centerBox {
      width: 300px;
      height: 180px;
      background: #fff;
      box-shadow: 0px 3px 10px #000;
      padding: 50px 30px;
      line-height: 36px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      .raGroup {
        display: flex;
      }
      .btn {
        margin-top: 30px;
      }
    }
  }
}
</style>
